<template>
	<view>
		<view style="background: #fff;width: 90%;margin:5%;height: 200rpx;display: flex;flex-direction: row;
		align-items: center;justify-content: space-evenly;border-radius: 30rpx;
		
		">
			<view style="background: #CECECE;height: 160rpx;width: 25%;border-radius: 30rpx;
				display: flex;align-items: center;justify-content: center;font-size: 30rpx;
			"
				v-for="(item,index) in tabData"
				@click="chageTab(item)"
			>
				{{item.name}}
			</view>
			
		</view>
		<view class="feedBox" >
			<view class="feedTitle">{{ problemTitle }}</view>
			<view class="feedConBox">
				<view
					class="feedTextBox flex align-center justify-between"
					hover-class="contentHover"
					hover-stay-time="50"
					@click="goFeedDetail(item)"
					v-for="(item, idx) in problemList"
					:key="idx"
				>
					<view class="feedText">{{ item.title }}</view>
					<view class="cuIcon-right padding-right"></view>
				</view>
			</view>
		</view>
		
		<view class="footBtnBlock">
			有其他问题找答疑 {{mobile}}
		</view>
	</view>
</template>

<script>
		import request from '@/common/request.js';
export default {
	data() {
		return {
			tabData:[
				
			],
			tabId:0,
			problemTitle:"",
			problemList:[],
			mobile:""
		};
	},
	onLoad() {
		this.init();
		this.info();
	},
	methods: {
		init(){
			let opts2 = {
				url: 'api/notices/helpType',
				method: 'get'
			};
			request.httpTokenRequest(opts2).then((res)=>{
				this.tabData = res.data.data;
				this.tabId = this.tabData[0].id;
				this.problemTitle = this.tabData[0].name;
				this.list();
			})
		},
		list(){
			let opts2 = {
				url: 'api/notices/helplist',
				method: 'get'
			};
			request.httpTokenRequest(opts2,{id:this.tabId}).then((res)=>{
				this.problemList = res.data.data;
			})
			
		},
		chageTab(e)
		{
			this.tabId = e.id;
			this.problemTitle = e.name;
			this.problemList = [];
			this.list()
		},
		info(){
			let opts2 = {
				url: 'api/index/index',
				method: 'get'
			};
			request.httpTokenRequest(opts2,{id:this.tabId}).then((res)=>{
				this.mobile = res.data.data.mobile;
			})
			
		},
		goFeedDetail(item) {
			uni.navigateTo({
				url: `/pages/me/helpdetail?title=${item.title}&id=${item.id}`
			});
		},
		goFeedBtn(item) {
			
		}
	}
};
</script>

<style lang="scss">
.feedBox {
	padding: 30rpx;;
	background: #fff;
	margin: 30rpx;
	border-radius: 30rpx;
	

	.feedTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #1d1d21;
		padding: 50rpx 0;
	}
	.feedConBox {
		background: #ffffff;
		border-radius: 16rpx;
		
		.feedTextBox {
			border-top: 1rpx solid rgb(213, 213, 213);
			padding: 50rpx 0;
			
		}

		.feedText {
			font-size: 30rpx;
			color: #1d1d21;
		}

		&:nth-of-type(1) {
			border-top: none;
		}
	}
}
.footBtnBox {
	display: flex;
	position: fixed;
	bottom: 0rpx;
	background-color: #f2f2f2;
	width: 100%;
	height: 140rpx;
	.footBox {
		width: 92%;
		height: 120rpx;
		padding: 30rpx;
		margin: 10rpx 30rpx 20rpx;
		background: #ffffff;
		box-shadow: 0px 0px 10px rgba(193, 193, 193, 0.2);
		border-radius: 16rpx;
	}

	.footIconBox {
		width: 33.33%;
		text-align: center;

		.cu-btn {
			padding: 0;
			background-color: #ffffff;
			line-height: 50rpx;
		}
	}

	.footIcon {
		font-size: 40rpx;
	}

	.footText {
		font-size: 30rpx;
		color: #1d1d21;
	}
}
.footBtnBlock {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 50rpx;
}
.opacityHover {
	opacity: 0.6 !important;
}
</style>
